<template>
  <div class="app-container">
    <div>
      <el-form
        :model="productForm"
        label-position="right"
        label-width="130px"
        ref="productForm"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="产品名称:" prop="name">
              <el-input
                v-model="productForm.name"
                placeholder="请输入内容"
                size="small"
                style="width: 150px"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="产品编号:" prop="code">
              <el-input
                v-model="productForm.code"
                placeholder="请输入内容"
                size="small"
                style="width: 150px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-form-item>
            <el-button
              type="success"
              icon="plus"
              style="width: 80px"
              @click="searchByProduct"
              >筛选</el-button
            >
            <!-- v-if="hasPerm('strategy:auto')" -->
            <el-button
              type="danger"
              icon="plus"
              style="width: 80px"
              @click="resetsearchByProduct"
              >重置</el-button
            >
          </el-form-item>
        </el-row>
     <div>
       <el-button
              type="success"
              icon="plus"
              style="margin-bottom:20px"
              @click="addProduct()"
              >新增产品</el-button
            >
       </div>
    <el-table
      :data="productTable"
      v-loading.body="listLoading"
      element-loading-text="拼命加载中"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column
        align="center"
        label="id"
        prop="id"
        width="150"
        v-if="false"
      ></el-table-column>
        <el-table-column
        align="center"
        label="发布状态"
        prop="publishStatus"
        width="150"
      >
       <template slot-scope="scope">
          {{ scope.row.publishStatus | checkStatus(publishStatusOptions) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="产品名称"
        prop="name"
        width="150"
      ></el-table-column>
      <el-table-column
        align="center"
        label="产品编号"
        prop="code"
        width="150"
      ></el-table-column>
      <el-table-column
        align="center"
        label="描述"
        prop="desc"
        width="300"
      ></el-table-column>
       <el-table-column
        align="center"
        label="创建时间"
        prop="createDate"
        width="180"
      >
       <template slot-scope="scope">
          {{ scope.row.createDate ? parseTime(scope.row.createDate) : null }}
        </template>
        </el-table-column>
       <el-table-column
        align="center"
        label="更新时间"
        prop="updateDate"
        width="180"
      > <template slot-scope="scope">
          {{ scope.row.updateDate ? parseTime(scope.row.updateDate) : null }}
        </template>
        </el-table-column>
      <el-table-column align="center" label="操作" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button type="text" icon="edit" @click="showDetail(scope.row)"
            >详情</el-button
          >
          <!-- v-if="hasPerm('user:update')" -->
          <!-- v-if="scope.row.orderStatus == 'EFFECTIVE'" -->
          <!-- v-if="hasPerm('user:update')" -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleProductSizeChange"
      @current-change="handleCurrentProductChange"
      :current-page="productListQuery.pageNum"
      :page-size="productListQuery.pageRow"
      :total="totalProductCount"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
     </el-form>
    </div>
     <el-dialog
      title="新增产品"
      :visible.sync="dialogAddProductVisible"
      style="min-width: 1200px"
    >
          <el-form
            :model="productDetailForm"
            :rules="productDetailFormRules"
            label-position="left"
            style="margin-left: 20px"
            ref="productDetailForm"
          >
            <el-row>
              <el-col :span="24">
                <el-form-item
                  label="产品名称:"
                  label-width="110px"
                  style="width: 300px"
                  prop="name"
                >
                  <el-input
                    v-model="productDetailForm.name"
                    autocomplete="off"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item
                  label="产品编号:"
                  label-width="110px"
                  style="width: 300px"
                  prop="code"
                >
                  <el-input
                    v-model="productDetailForm.code"
                    autocomplete="off"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item
                  label="产品描述:"
                  label-width="110px"
                  style="width: 300px"
                  prop="desc"
                >
                  <el-input
                    v-model="productDetailForm.desc"
                    autocomplete="off"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row type="flex" justify="center">
              <el-form-item>
                <el-button
                  type="primary"
                  icon="plus"
                  style="width: 80px"
                  @click="saveProduct()"
                  >保存</el-button
                >
              </el-form-item>
            </el-row>
          </el-form>
     </el-dialog>

    <el-dialog
      title="详情"
      :visible.sync="dialogProductVisible"
      :width="dialogWidth"
    >
      <el-tabs v-model="activeName">
        <el-tab-pane label="基本信息" name="first">
          <el-form
            :model="productDetailForm"
            :rules="productDetailFormRules"
            label-position="left"
            style="margin-left: 20px"
            ref="productDetailForm"
          >
            <el-row>
              <el-col :span="24">
                <el-form-item
                  label="产品名称:"
                  label-width="110px"
                  style="width: 300px"
                  prop="name"
                >
                  <el-input
                    v-model="productDetailForm.name"
                    autocomplete="off"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item
                  label="产品编号:"
                  label-width="110px"
                  style="width: 300px"
                  prop="code"
                >
                  <el-input
                    v-model="productDetailForm.code"
                    autocomplete="off"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item
                  label="产品描述:"
                  label-width="110px"
                  style="width: 300px"
                  prop="desc"
                >
                  <el-input
                    v-model="productDetailForm.desc"
                    autocomplete="off"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item
                  label="发布状态:"
                  label-width="110px"
                  style="width: 300px"
                >
                  {{productDetailForm.publishStatus | checkStatus(publishStatusOptions)}}
     
                </el-form-item>
              </el-col>
            </el-row>

            <el-row type="flex" justify="center">
              <el-form-item>
                <el-button
                  type="primary"
                  icon="plus"
                  style="width: 80px"
                  @click="updatePublish('PILOT_RUN')"
                  :loading="loading"
                  >预发布</el-button
                >
                <!-- v-if="hasPerm('strategy:auto')" -->
                <el-button
                  type="primary"
                  icon="plus"
                  style="width: 80px"
                  @click="updatePublish('RELEASED')"
                  >上架</el-button
                >
                <el-button
                  type="primary"
                  icon="plus"
                  style="width: 80px"
                  @click="updatePublish('UN_RELEASED')"
                  >下架</el-button
                >
                <el-button
                  type="primary"
                  icon="plus"
                  style="width: 80px"
                  @click="saveProduct()"
                  >保存</el-button
                >
              </el-form-item>
            </el-row>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="规格" name="second">
          <el-form :model="specsData" ref="specsDataForm">
            <el-form-item>
              <el-button type="primary" @click="newSpecs()"
                >添加新规格</el-button
              >
            </el-form-item>
            <el-table
              :data="specsData.specsTable"
              v-loading.body="listLoading"
              element-loading-text="拼命加载中"
              border
              fit
              highlight-current-row
              style="width: 100%"
            >
              <el-table-column
                align="center"
                label="id"
                prop="id"
                width="150"
                v-if="false"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="规格名称"
                prop="name"
                width="150"
              >
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'specsTable.' + scope.$index + '.name'"
                    :rules="specsRules.name"
                  >
                    <el-input
                      v-if="scope.row.isEdit"
                      v-model="scope.row.name"
                      placeholder="请输入内容"
                    ></el-input>
                    <span v-else>{{ scope.row.name }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="规格编号"
                prop="code"
                width="150"
              >
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'specsTable.' + scope.$index + '.code'"
                    :rules="specsRules.code"
                  >
                    <el-input
                      v-if="scope.row.isEdit"
                      v-model="scope.row.code"
                      placeholder="请输入内容"
                    ></el-input>
                    <span v-else>{{ scope.row.code }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="价格"
                prop="price"
                width="150"
              >
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'specsTable.' + scope.$index + '.price'"
                    :rules="specsRules.price"
                  >
                    <el-input
                      v-if="scope.row.isEdit"
                      v-model="scope.row.price"
                      placeholder="请输入内容"
                    ></el-input>
                    <span v-else>{{ scope.row.price }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="生效规则"
                prop="effectiveRule"
                width="150"
              >
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'specsTable.' + scope.$index + '.effectiveRule'"
                    :rules="specsRules.effectiveRule"
                  >
                  <el-select
                    v-model="scope.row.effectiveRule"
                    placeholder="请选择"
                    style="width: 150px"
                     v-if="scope.row.isEdit"
                  >
                      <el-option
                        v-for="item in effectiveRuleOptions"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                  </el-select>
                    <!-- <el-input
                      v-if="scope.row.isEdit"
                      v-model="scope.row.effectiveRule"
                      placeholder="请输入内容"
                    ></el-input> -->
                   
                    <span v-else>{{  scope.row.effectiveRule | checkEffectiveRule(effectiveRuleOptions) }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="年限"
                prop="yearLength"
                width="150"
              >
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'specsTable.' + scope.$index + '.yearLength'"
                    :rules="specsRules.yearLength"
                  >
                    <el-input
                      v-if="scope.row.isEdit"
                      v-model="scope.row.yearLength"
                      placeholder="请输入内容"
                    ></el-input>
                    <span v-else>{{ scope.row.yearLength }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="适用年龄"
                prop="adaptiveAge"
              >
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'specsTable.' + scope.$index + '.adaptiveAge'"
                    :rules="specsRules.adaptiveAge"
                  >
                    <el-input
                      v-if="scope.row.isEdit"
                      v-model="scope.row.adaptiveAge"
                      placeholder="请输入内容"
                    ></el-input>
                    <span v-else>{{ scope.row.adaptiveAge }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="操作"
                fixed="right"
                width="150"
              >
                <template slot-scope="scope">
                  <el-button
                    v-if="!scope.row.isEdit"
                    @click="editSpecs(scope.row)"
                    type="text"
                    size="mini"
                    >编辑</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    v-if="scope.row.isEdit"
                    @click="saveSpecs(scope.row)"
                    >保存</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    v-if="scope.row.isEdit && scope.row.id"
                    @click="cancelSpecs(scope.row, scope.$index)"
                    >取消</el-button
                  >
                  <el-button
                    @click="delSpecs(scope.row, scope.$index)"
                    type="text"
                    size="mini"
                    >删除</el-button
                  >
                  <!-- v-if="hasPerm('user:update')" -->
                  <!-- v-if="scope.row.orderStatus == 'EFFECTIVE'" -->
                  <!-- v-if="hasPerm('user:update')" -->
                </template>
              </el-table-column>
            </el-table>
            <!-- <el-pagination
              @size-change="handleSpecsSizeChange"
              @current-change="handleCurrentSpecsChange"
              :current-page="specsListQuery.pageNum"
              :page-size="specsListQuery.pageRow"
              :total="totalSpecsCount"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
            ></el-pagination> -->
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogWidth:0,
      totalProductCount: 0, //分页组件--数据总条数
      // totalSpecsCount: 0,
      productTable: [], //表格的数据
      specsData: {
        specsTable: undefined
      },
      publishStatusOptions:[
        {
          value:'RELEASED',
          label:'上架'
        },
        {
          value:'PILOT_RUN',
          label:'预发布'
        },{
          value:'UN_RELEASED',
          label:'下架'
        }
      ],
       effectiveRuleOptions:[
      ],
      listLoading: false, //数据加载等待动画
      listLoadingDialog: false,
      loading: false,
      productListQuery: {
        pageNum: 1, //页码
        pageRow: 10 //每页条数
      },
      specsListQuery: {
        pageNum: 1, //页码
        pageRow: 10 //每页条数
      },
      activeName: "first",
      dialogStatus: "details",
      dialogProductVisible: false,
      dialogAddProductVisible:false,
      productForm: {
        name: "",
        code: ""
      },
      productDetailForm: {
        id: "",
        name: "",
        code: "",
        desc: "",
        publishStatus:''
      },

      productDetailFormRules: {
        name: [{ required: true, trigger: "blur", message: "请输入产品名称" }],
        code: [{ required: true, trigger: "blur", message: "请输入产品编码" }],
        desc: [{ required: true, trigger: "blur", message: "请输入产品描述" }]
      },
      specsRules: {}
    };
  },
  created() {
    this.setDialogWidth()
    this.searchByProduct();
  },
  filters: {
    checkStatus: function(status, list) {
      let obj = list.find(item => item.value === status);
      if (obj) {
        return obj.label ? obj.label : "";
      } else {
        return "";
      }
    },
     checkEffectiveRule: function(status, list) {
      let obj = list.find(item => item.code === status);
      if (obj) {
        return obj.name ? obj.name : "";
      } else {
        return "";
      }
    }
  },
  methods: {
    searchByProduct() {
      //查询列表
      let url =
        "/product/query/" +
        this.productListQuery.pageNum +
        "/" +
        this.productListQuery.pageRow;
      this.listLoading = true;
      let data = {};
      data = {
        name: this.productForm.name,
        code: this.productForm.code
      };
      this.api({
        url: url,
        method: "post",
        data: data
      }).then(data => {
        this.listLoading = false;
        this.productTable = data.data.datas;
        this.totalProductCount = data.data.total;
      });
    },
    searchBySpecs() {
      let url =
        "/productFormat/query/" +
        this.productDetailForm.id
      // this.listLoading = true;
      this.api({
        url: url,
        method: "get"
      }).then(data => {
        // this.listLoading = false;
        let tempSpecsTable = data.data ? data.data : [];
        if (tempSpecsTable) {
          tempSpecsTable.forEach((item, index) => {
            item.isEdit = false;
          });
        }
        this.specsData.specsTable = tempSpecsTable;
        // this.totalSpecsCount = data.data ? data.data.total : 0;
      });
    },
    resetsearchByProduct() {
      this.$refs.productForm.resetFields();
    },
    handleProductSizeChange(val) {
      //改变每页数量
      this.productListQuery.pageRow = val;
      this.handleProductFilter();
    },
    handleCurrentProductChange(val) {
      //改变页码
      this.productListQuery.pageNum = val;
      this.searchByProduct();
    },
    handleProductFilter() {
      this.productListQuery.pageNum = 1;
      this.searchByProduct();
    },
    handleSpecsSizeChange(val) {
      //改变每页数量
      this.specsListQuery.pageRow = val;
      this.handleSpecsFilter();
    },
    handleCurrentSpecsChange(val) {
      //改变页码
      this.specsListQuery.pageNum = val;
      this.searchBySpecs();
    },
    handleSpecsFilter() {
      this.productListQuery.pageNum = 1;
      this.searchBySpecs();
    },
    // getIndex($index) {
    //   //表格序号
    //   return (this.listQuery.pageNum - 1) * this.listQuery.pageRow + $index + 1;
    // },

    showDetail(row) {
      this.dialogProductVisible = true;
      this.productDetailForm.id = row.id;
      this.productDetailForm.name = row.name;
      this.productDetailForm.code = row.code;
      this.productDetailForm.desc = row.desc;
      this.productDetailForm.publishStatus = row.publishStatus
      this.searchBySpecs();
      this.getProductFormatEffectRule();
    },
    addProduct(){
       this.dialogAddProductVisible = true
    },
    saveProduct() {
      this.$refs.productDetailForm.validate(valid => {
        if (valid) {
          this.loading = true;
          let url;
          let params;
          let method;
          if(this.productDetailForm.id)
          {
            url = "product/update";
            method = "put"
            params = {
            id: this.productDetailForm.id,
            name: this.productDetailForm.name,
            code: this.productDetailForm.code,
            desc: this.productDetailForm.desc
             };
          }
          else
          {
            url = "product/add";
            method="post"
            params = {
            name: this.productDetailForm.name,
            code: this.productDetailForm.code,
            desc: this.productDetailForm.desc
             };
          }
          this.api({
            url: url,
            method: method,
            data: params
          }).then(data => {
            this.loading = false;
            if(data.errorMessage)
            {
               this.$message.info(data.errorMessage);
            }
           
            this.searchByProduct();
            this.dialogAddProductVisible = false;
            this.dialogProductVisible = false;
          });
        }
      });
    },
    updatePublish(status) {
      let url = "product/publish/update/";
      let params = {
        id: this.productDetailForm.id,
        publishStatus: status
      };
      this.api({
        url: url,
        method: "put",
        data: params
      }).then(data => {
        this.loading = false;
        if(data.errorMessage)
        {
          this.$message.info(data.errorMessage);
        }
        this.dialogProductVisible = false;
        this.searchByProduct()
      });
    },
    close() {
      this.dialogProductVisible = false;
    },
    newSpecs() {
      this.specsData.specsTable.push({
        id: "",
        name: "",
        code: "",
        price: "",
        effectiveRule: "",
        yearLength: "",
        adaptiveAge: "",
        isEdit: true
      });
    },
    editSpecs(row) {
      row.isEdit = true;
    },
    saveSpecs(row) {
      let url;
      let method;
      let params = {
        productId:this.productDetailForm.id,
        id: row.id ? row.id : "",
        name: row.name,
        code: row.code,
        price: row.price,
        effectiveRule: row.effectiveRule,
        yearLength: row.yearLength,
        adaptiveAge: row.adaptiveAge
      };
      if (row.id) {
        url = "productFormat/update";
        method = "put";
      } else {
        url = "productFormat/add";
        method = "post";
      }
      this.api({
        url: url,
        method: method,
        data: params
      }).then(data => {
        this.loading = false;
        if(data.errorMessage)
        {
        this.$message.info(data.errorMessage);
        }

        this.searchBySpecs();
      });
    },
    cancelSpecs(row) {
      row.isEdit = false;
    },
    delSpecs(row, index) {
      if (!row.id) {
        this.specsData.specsTable.splice(index, 1);
      } else {
        let url = "productFormat/delete/" + row.id;
        this.api({
          url: url,
          method: "delete"
        }).then(data => {
          this.loading = false;
          if(data.errorMessage)
          {
            this.$message.info(data.errorMessage);
          }
          this.searchBySpecs();
        });
      }
    },
    getProductFormatEffectRule(){
      let url = "dropdown/findByKey/" + 'ProductFormatEffectiveRule';
        this.api({
          url: url,
          method: "get"
        }).then(data => {
          this.loading = false;
          if(data.errorMessage)
          {
            this.$message.info(data.errorMessage);
          }
          this.effectiveRuleOptions=data.data
        });
    },
    setDialogWidth()
    {
      var val = document.body.clientWidth
      const def = 1000 // 默认宽度
      if (val < def) {
        this.dialogWidth = '100%'
      } else {
        this.dialogWidth = def + 'px'
      }
    }
  }
};
</script>
